/*!
 * description: 主站改版样式
 * require: uicn.v1.css
 * relevancy: XXX.js
 *
 * date: 2015-07-30
 * update: (2015-09-01)
 */

/*公共样式*/
a { color: #2c3e50; }
a:hover { color: #FF1D6B; }

/*按钮 */
.btn-fixed-100 { width: 100px; padding-left: 0; padding-right: 0; }

/*背景各种灰色*/
.bg-gray2 { background-color: #eaeef1; overflow: hidden; zoom: 1;}
.bg-gray3 { background: url("../images/h-bg.jpg") repeat-x left top #eff3f5; width: 100%; height: auto; overflow: hidden; zoom: 1;}
/*文字各种灰色*/
.txt-gray1 { color: #b8c4ce!important;}
.txt-orange { color: #f39c12!important;}
.txt-normal { color: #2c3e50!important;}
/*字体大小*/
.f24 { font-size: 24px!important; }

/*背景颜色*/
.bg-blue { background-color: #FF1D6B!important; }
.bg-purple { background-color: #9b59b6!important; }
.bg-red { background-color: #e74c3c!important; }

.main { float: left; width: 940px;}
.aside { float: right; width: 220px; }

 /*查看评论点赞数量*/
.msg span { margin-right: 10px;}
.msg span i { font-size: 18px; color: #9aabb8; margin-right: 5px; }
.msg span em { font-size: 14px; color: #9aabb8; }

/*左右块宽度*/
.w280 { width: 280px; }
.w820 { width: 820px; }

/*
 *
 * 首页
 *
 */

/*作品筛选*/
.h-screen { float: left; margin-top: 15px; }
.h-screen li { position: relative; float: left; }
.h-screen li a {display: block; height: 40px; margin-right: 25px; padding: 0 20px; font-size: 14px; line-height: 40px; text-align: center; }
.h-screen li a .num { position: relative; display: inline-block; height: 20px; line-height: 20px; margin-left: 10px; background-color: #FF1D6B; color: #fff; }
.h-screen li a .num:after,
.h-screen li a .num:before { content:""; width: 0; height: 0; position: absolute; border-style: solid; border-color: ;}
.h-screen li a .num:before { top: 0; left: -6px; border-color: transparent #FF1D6B transparent transparent; border-width: 10px 6px 10px 0; }
.h-screen li a .num:after { top: 0; right: -6px; border-color: transparent transparent transparent #FF1D6B; border-width: 10px 0 10px 6px; }
.h-screen li.on a { border: 1px solid #bdc3c7; border-radius: 20px; }
.h-screen li.on a:hover { border-color: #FF1D6B; }
.h-screen li.on a .num { display: none; }
/*公告鸡汤*/
.h-soup { float: right; width: 600px; margin-top: 15px; }
.h-soup li { position:relative; float: right; }
.h-soup li a { display: inline-block;}
.h-soup li a:hover { text-decoration: underline; }
.h-soup i { margin-right: 6px; font-size: 28px; line-height: 40px; cursor: pointer; }
.h-soup i:hover { color: #e67e22; }
.h-soup .txt { display: none; position: absolute; width: auto; top: 0; right: 0; padding: 0 40px 0 20px; background-color: #fff7e7; border-radius: 20px; box-shadow: 1px 1px 2px rgba(0,0,0,.2); font-size: 14px; color: #6b3612; line-height: 40px; white-space: nowrap; }
.h-soup li.open i { position: relative; z-index: 2; color: #e67e22; }
.h-soup li.open .txt { z-index: 1; display: block; }

/*没有关注*/
.h-follow { }
.h-follow .tit1 { margin-top: 38px; font-size: 24px; color: #34495e; text-align: center; font-weight: bold; }
.h-follow .tit2 { margin-bottom: 38px; font-size: 20px; color: #34495e; text-align: center; }
.h-follow-box { border: 3px solid #e2e6ea; }
.h-follow-box ul { margin: 0 -6px 60px 0;}
.h-follow-box .item { float: left; width: 220px; margin: 0 8px; }
.h-follow-box .avatar-sm { display: block; margin: 0 auto; margin-top: 45px; }
.h-follow-box .name { display: block; margin: 6px 0 3px; font-size: 12px; color: #FF1D6B; text-align: center; }
.h-follow-box .intro { font-size: 12px; height: 36px; overflow: hidden; margin-bottom: 25px; color: #7f8c8d; text-align: center;}
.h-follow-check { width: 70px; margin: 0 auto; }
.h-follow-check .check { float: left; width: 12px; height: 12px; margin: 4px 10px; background-color: #fff; border: 1px solid #bac1c2; cursor: pointer; }
.h-follow-check .check em { display: block; margin-left: -1px; background: url("../images/h-check.png") no-repeat left top; width: 18px; height: 12px; }
.h-follow-check p { float: left; font-size: 14px; color: #e67e22; font-weight: bold; }

.h-follow-btn { width: 1174px;  border-top: 1px solid #e0e7eb;}
.h-follow-btn a { display: block; width: 220px; height: 40px; margin: 20px auto 30px; font-size: 14px; color: #e67e22; line-height: 38px; text-align: center; border: 1px solid #e67e22; border-radius: 20px; }

/*新手入门*/
.h-novice { float: left; width: 280px; background-color: #fff; }
.h-novice .cover { display: block; width: 280px; height: 210px; }
.h-novice .info { position: relative; padding: 15px 15px 38px; height: 157px; overflow: hidden; }
.h-novice .info:before { content: ""; position: absolute; top: -15px; left: 20px; width: 0; height: 0;
	border-color: transparent transparent #fff transparent;
	border-style: solid;
	border-width: 0 15px 15px; }
.h-novice .info h1 a { display: block; height: 48px; overflow: hidden; font-size: 16px; }
.h-novice .info p { height: 44px; overflow: hidden; font-size: 14px; color: #7c7c7c; }
.h-novice .info .author { margin-top: 15px; }
.h-novice .info .author .avatar { width: 50px; height: 50px; margin-right: 10px; }
.h-novice .info .author .name { margin-top: 5px; font-size: 14px; }

.h-novice-first { float: left; width: 334px; height: 624px; border: 3px solid #FF1D6B; }
.h-novice-first .cover { width: 334px; height: 134px; }
.h-novice-first .list { padding: 12px 20px 0; }
.h-novice-first .list li { }
.h-novice-first .list li:before { content: ""; float: left; width: 6px; height: 6px; margin: 13px 0; background-color: #FF1D6B; border-radius: 50%;}
.h-novice-first .list li a { display: block; height: 32px; font-size: 14px; color: #7c7c7c; line-height: 32px; text-indent: 10px; }
.h-novice-first .list li a:hover { color: #FF1D6B; }
.h-novice-first .more { display: block; width: 100%; height: 50px; margin-top: 12px; font-size: 14px; color: #7c7c7c; line-height: 50px; text-indent: 40px; background-color: #ecf0f1; }

.h-novice-tag { position: absolute; top: 3px; left: 1px; height: 36px; line-height: 36px; font-size: 86px; color: #f39c12; }
.h-novice-tag .txt { position: absolute; top: 0; left: 0; width: 75px; font-family: "Microsoft Yahei"; font-size: 16px; color: #fff; text-align: center;
  -webkit-text-stroke-width: initial;}
.h-novice-tag.purple { color: #8e44ad; }
.h-novice-big { height: 54px; line-height: 54px; font-size: 130px; color: #8e44ad;  }
.h-novice-big .cont { position: absolute; top: 0; left: 0; }
.h-novice-big .t1 { font-size: 20px; color: #fff; font-weight: bold; }
.h-novice-big .t2 { font-size: 14px; color: #fff; font-weight: bold; font-style: italic; }
.h-novice-big .t3 { font-size: 12px; color: #fff; font-style: italic;  }

.h-novice-study { position: absolute; top: 3px; left: 0; width: 100px; height: 31px; padding: 31px 0 0 24px; background: url("../images/h-novice-study.png") no-repeat left top; font-size: 14px; color: #fff; font-weight: bold; font-style: italic;}

/*文章资讯*/
/*文章标题*/
.h-tit { height: 30px; line-height: 30px; }
.h-tit a { display: inline-block; font-size: 18px; color: #7c7c7c; line-height: 30px; }
.h-tit a.on { font-size: 22px; color: #FF1D6B; }
.h-tit .tips { position: relative; display: inline-block; width: 80px; height: 24px; margin-left: 10px; vertical-align: middle; font-size: 14px; color: #b2bdbe; text-align: center; line-height: 24px; background-color: #ecf0f1; border-radius: 5px; }
.h-tit .tips:before { content:""; position: absolute; top: 7px; left: -9px; border-style: solid; border-color: transparent #ecf0f1 transparent transparent; border-width: 5px 9px 5px 0; }
.h-tit2 { font-size: 22px; color: #808080; }
/*.h-tit .switch-tip:before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 12px; vertical-align: middle; background-color: #7c7c7c; border-radius: 50%; }*/
.switch-tip { margin-left: 50px; }
.switch-tip + .dot { position: absolute; bottom: 12px; width: 5px; height: 5px; background-color: #7c7c7c; border-radius: 50%;}
.h-member-btn .switch-tip + .dot { left: 122px;}
.h-article-btn .switch-tip + .dot { left: 107px;}
.h-member-btn a { min-width: 110px; }
.h-article-btn a { min-width: 45px; }

/*文章列表*/
.h-article-list { width: 100%; }
/*.h-article-list .ptbw {  border-top: 1px solid #e0e7eb; }*/
.h-article-list li { padding: 20px 0; border-bottom: 1px solid #e0e7eb;}
.h-article-list .cover { float: left; display: block; /*width: 160px; height: 120px;*/ }
.h-article-info { position: relative; float: left; width: 640px; margin-left: 20px; }
.h-article-info h1 { margin: 2px 0; }
.h-article-info h1 a { float: left; display: block; max-width: 450px; font-size: 18px; }
.h-article-info .tag { float: left; height: 25px; margin: 1px 5px 1px 0; padding: 0 10px; font-size: 12px; color: #fff; border-radius: 2px; line-height: 25px; }
.h-article-info p { max-height: 44px; overflow: hidden; margin-top: 5px; color: #7f8c8d; }
.h-article-info .avatar img { width: 20px; height: 20px; }
.h-article-info .avatar .name { padding: 0 15px; vertical-align: middle; font-size: 12px; color: #394a58; font-weight: bold; line-height: 21px;}
.h-article-info .avatar .name:after { content:""; float: right; height: 14px; margin: 3px 20px 3px 0; border-right: 1px solid #e0e7eb; }
.h-article-info .data { position: absolute; top: 5px; right: 0; color: #bdbdbd; }
.h-article-info .data i { margin-right: 10px; color: #bdbdbd; font-size: 14px;}

/*更多推荐*/
.h-list-more { display: block; margin: 0 auto; width: 220px; height: 40px; font-size: 14px; line-height: 40px; text-align: center;  border: 1px solid #bdc3c7; border-radius: 30px; }
.h-list-more:hover { border-color: #FF1D6B; }
.more-border { width: 100%; border-top: 1px solid #e0e7eb; }

/*侧栏招聘列表*/
.h-tit-aside { margin: 17px 0; font-size: 24px; color: #7c7c7c; }
.h-aside-list { box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.h-aside-list li > a { display: block; width: 280px; height: 125px; }
.h-aside-list .cover { width: 280px; height: 125px; }
.h-aside-list + .more { display: block; margin: 0 auto; width: 43px; height: 36px; background: url("../images/arrow3.png") no-repeat center top; font-size: 12px; color: #7f8c8d; text-align: center; line-height: 28px;}
.h-aside-show { opacity: 0; visibility: hidden; padding: 16px 50px 16px 25px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.6); transition: all .3s;}
.h-aside-show .item { font-size: 14px; color: #fff; }
.h-aside-show .tip { position: absolute; right: 20px; bottom: 14px; font-size: 12px; color: rgba(255,255,255,.5); text-align: center; }
.h-aside-show .tip .num { display: block; width: 34px; height: 38px; font-size: 44px; line-height: 38px; text-align: left; font-style: italic; font-weight: bold;  }
.h-aside-show .tip .txt { font-size: 22px; font-weight: bold; }
.h-aside-list li > a:hover .h-aside-show { opacity: 1; visibility: visible; }

/*设计师*/
.h-member { width: 1200px; }
.h-member li { float: left; width: 300px; padding-top: 20px; min-height: 82px; }
.h-member li a.avatar-sm { float: left; margin-right: 10px; }
.h-member .cont { float: left; width: 210px; }
.h-member .cont .user { font-weight: normal; }
.h-member .cont .user a { color: #FF1D6B; font-size: 14px; }
.h-member .cont .text { max-height: 40px; overflow: hidden; color: #7f8c8d; font-size: 14px; line-height: 20px; }
.h-member .cont .date { white-space: nowrap; overflow: hidden; color: #D9E1E5; font-size: 14px; line-height: 20px; }
.h-member + .line { border-top: 1px solid #e0e7eb; }

/*合作伙伴*/
.h-partners .logo { margin: 0 -10px; }
.h-partners .logo li { float: left; }
.h-partners .logo li a { display: block; /*width: 150px;*/ height: 50px; text-align: center; margin: 0 10px; }
.h-partners .text { margin: 20px -15px; }
.h-partners .text li { float: left; }
.h-partners .text li a { display: block; font-size: 16px; margin: 0 15px; }

/*
 *
 * 详情页
 *
 */
.works-main { /*margin-top: 30px;*/ background-color: #fff; box-shadow: 0 0 3px rgba(0,0,0,.1); }
.works-top { padding: 20px;}
.works-top .left h1 strong { display: inline-block; max-width: 640px; white-space: nowrap; overflow: hidden; font-size: 20px; color: #2c3e50; font-weight: bold; height: 30px; }
.works-top .left h1 .edit { margin-left: 10px; vertical-align: super; }
.works-top .left { float: left; width: 700px; }
.works-top .left .det { margin-top: 5px; font-size: 14px; }
.works-top .left .det .tag { float: left; padding: 0 5px; height: 20px; font-size: 12px; color: #9aabbf; line-height: 20px; background-color: #dfe5e9; border-radius: 2px;}
.works-top .left .det span { float: left; }
.works-top .left .det .txt-gray1 { margin-left: 25px; }
.works-top .left .det .time { margin-left: 20px; }
.works-top .left .det .time i { float: left; height: 21px; line-height: 21px; margin-right: 5px; color: #9aabb8; }
.works-top .left .det .time em { float: left; height: 21px; line-height: 21px; color: #9aabb8;}
.works-top .left .det .disabled { color: #b8c4ce; cursor: not-allowed; }
.works-top .left .det .disabled:hover { text-decoration: none; }
.works-top { }
.works-top { }
.works-top { }

.copyright { float: left; }
.copyright i { font-size: 22px; cursor: pointer; }
.copyright i.on { color: #FF1D6B; }
.copyright .text { opacity: 0; position: absolute; top: 25px; left: -78px; width: 180px; background-color: #FF1D6B; color: #fff; padding: 10px 0; line-height: 14px; font-size: 14px; text-align: center; border-radius: 2px; 
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
        -ms-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s; }
.copyright .text:before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -8px; border-color: transparent transparent #FF1D6B transparent; border-style: solid; border-width:  0 7px 8px 7px; height: 0; width: 0;}
.copyright i:hover + .text { opacity: 1; top: 30px;}

.works-top .right { float: left; width: 200px; }
.works-top .right h3 { position: absolute; right: 20px; margin-top: 2px; width: 500px; overflow: hidden; white-space: nowrap; text-align: right; }
.works-top .right h3 a { font-size: 14px; color: #16a085; transition: all .2s;}
.works-top .right h3 a:hover { text-decoration: underline; }
.works-top .hot { text-align: right; margin-top: 15px; margin-right: 12px; height: 45px; }
.works-top .hot i { font-size: 30px; color: #acbbc6; vertical-align: super; }
.works-top .hot .num { font-size: 30px; color: #acbbc6; font-weight: bold; font-style: italic;}
.works-top .hot .num em { font-size: 18px; font-style: italic;}
.works-top .hot .num strong { position: absolute; right: 5px; top: 25px; font-size: 22px; }
.works-top .tag-star { position: absolute; top: -6px; right: -6px; }

/*作品内容*/
.works-cont { padding: 20px; border-top: 1px solid #eff3f5;  border-bottom: 1px solid #eff3f5; }
.works-cont img { display: block; margin: 0 auto 20px; max-width: 100%; overflow: hidden; }
/*.works-cont li img { max-width: 800px; }*/
.works-cont .video-box { width: 720px; height: 540px; margin: 0 auto;} 

/*作品标签*/
.works-tag { padding: 0 20px; }
.works-tag li {display: inline-block; height: 20px; margin-right: 20px; margin-top: 10px; }
.works-tag li i { padding-right: 5px; color: #b8c4ce; font-size: 14px; }
.works-tag li span { color: #b8c4ce;}
/*作品分享、下载、点赞*/
.works-bottom { width: 900px; height: 140px; padding: 0 20px; }
.works-bottom .share {}
.works-bottom .share { position: relative; float: left; margin-top: 32px; }
.works-bottom .share > a { float: left; margin-right: 10px; }
.works-bottom .share > a > i { display: inline-block; width: 40px; height: 40px; font-size: 24px; color: #34495e; text-align: center; line-height: 40px; background-color: #fff; border-radius: 50%; border: 1px solid #34495e;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;}
.works-bottom .share > a > i.icon-huaban { font-size: 21px; }
.works-bottom .share > a > i.icon-douban1 { font-size: 19px; }
.works-bottom .share > a.on > .icon-weixin1 { background-color: #3fb743; color: #fff; border-color: #3fb743; }
.works-bottom .share > a:hover > i { color: #fff;}
.works-bottom .share > a:hover > .icon-sina { background-color: #EE4B4B; border-color: #EE4B4B;}
.works-bottom .share > a:hover > .icon-weixin1 { background-color: #3fb743; border-color: #3fb743;}
.works-bottom .share > a:hover > .icon-huaban { background-color: #EA5075; border-color: #EA5075;}
.works-bottom .share > a:hover > .icon-douban1 { background-color: #1ABC9C; border-color: #1ABC9C;}
.works-bottom .share .weixin-box { display: none; position: absolute; left: 5px; top: -160px; bottom: initial; width: 270px; padding: 18px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.1); border-radius: 2px; }
.works-bottom .share .weixin-box:before { content:""; width: 10px; height: 10px; position: absolute; left: 60px; bottom: -5px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.1);
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);}
.works-bottom .share .weixin-box:after { content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; }
.works-bottom .share .weixin-box img { float: left; width: 111px; height: 111px; position: relative; z-index: 1;}
.works-bottom .share .weixin-box p { display: inline-block; width: 100px; margin-left: 15px; padding-top: 22px; font-size: 14px; position: relative; z-index: 1;}
.works-bottom .share .weixin-box .icon-close { position: absolute; right: 8px; top: 8px; color: #34495e; z-index: 1; }
/*作品点赞*/
.works-zan { display: block; width: 190px; margin: 20px auto 0; }
.works-zan .iconfont { display: block; height: 65px; line-height: 65px; overflow: hidden; }
.works-zan .iconfont:before { content: "\e6c6"; font-size: 190px; line-height: 65px; color: #FF1D6B; }

.works-zan .cont { position: absolute; top: 0; left: 0; width: 100%; }
.works-zan .cont i { float: left; margin-left: 32px; font-size: 30px; color: #fff; line-height: 65px; }
.works-zan .cont .txt { float: left; margin-left: 8px; font-family: "Microsoft Yahei"; font-size: 18px; color: #fff; line-height: 68px; 
  -webkit-text-stroke-width: initial;}
.works-zan .cont .num { float: right; margin-right: 32px; font-size: 12px; color: rgba(255,255,255,.5); text-align: right; line-height: 68px; }

/*作品下载、收藏*/
.works-bottom .oper { float: right; margin-top: 32px; }
.works-bottom .oper li { float: left; margin-left: 20px; }
.works-bottom .oper li a { display: block; width: 120px; height: 38px; font-size: 14px; color: #2c3e50; line-height: 38px; text-align: center; border-radius: 20px; border: 1px solid #4f5f6e; }
.works-bottom .oper li a i { margin-right: 5px; font-size: 18px; color: #2c3e50; line-height: 40px; }
.works-bottom .oper li a.on { color: #fcab2b; border-color: #fcab2b;}
.works-bottom .oper li a.on i { color: #fcab2b; }
.works-bottom .oper li a:hover { color: #FF1D6B; border-color: #FF1D6B;}
.works-bottom .oper li a:hover i { color: #FF1D6B; }
.works-bottom .tip { font-size: 12px; color: #9dacb9; line-height: 28px; }

/*作品作者信息*/
.works-author { width: 900px; padding: 20px 20px; background-color: #f6f9fa; border-top: 1px solid #eff3f5; border-bottom: 1px solid #eff3f5;}
.works-author .avatar-md { margin: 10px 0; }
.works-author .info { display: table;  width: 245px; overflow: hidden; margin: 10px 15px; }
.works-author .info > div { display: table-cell; vertical-align: middle; height: 100px; }
.works-author .info h1 { height: 30px; line-height: 30px; }
.works-author .info .name { display: inline-block; width: 245px; font-size: 20px; color: #2c3e50; font-weight: bold; }
.works-author .info .name:hover { color: #FF1D6B; }
.works-author .info .intro { width: 245px; color: #bdc3c7; }
.works-author .info .num { width: 245px; color: #34495e; }
.works-author .info .medal img { width: 26px; height: 26px; }

/*关注、私信按钮组*/
.works-author .btn-group { float: left; width: 90px; padding: 20px 0; } 
.works-author .btn-group .btn-item { float: left; width: 88px; height: 28px; margin: 5px 0; border: 1px solid #bdc3c7; border-radius: 20px; font-size: 12px; color: #34495e; line-height: 28px; text-align: center; }  
.works-author .btn-group .btn-item i { margin-right: 5px; font-size: 14px; color: #34495e; }
.works-author .btn-group .btn-item i.icon-add-bold,
.works-author .btn-group .btn-item i.icon-close-bold { font-size: 12px; }
.works-author .btn-group .btn-item:hover { color: #FF1D6B; border-color: #FF1D6B;}
.works-author .btn-group .btn-item:hover i { color: #FF1D6B; }

/* 关注
myfollow 关注+
havefollow 已关注√
mutualfollow 相互关注 =
onfollow 滑过关注
unfollow 滑过已关注和相互关注变取消关注 X
*/
.myfollow i:before { content: "\e66e"; }
.havefollow i:before { content: "\e627"; }
.unfollow i:before { content: "\e66c"; }
.mutualfollow i:before { content: "\e670"; }

/*作品作者其他作品*/
.works-author .more { float: right; width: 340px; }
.works-author .more .item { float: right; width: 160px; height: 120px; margin-left: 10px; }
.works-author .more .item:hover { opacity: .9; }

/*没有其他作品时显示*/
.works-nothing { display: block; width: 160px; margin: 0 auto; }
.works-nothing img { display: block; width: 108px; height: 65px; margin: 10px auto 0; }
.works-nothing span { display: block; font-size: 14px; color: #bdc3c7; text-align: center; line-height: 16px; margin-top: -5px; }
.works-nothing strong { display: block; font-size: 17px; color: #bdc3c7; text-align: center; line-height: 18px; font-weight: bold; }
/*
* 评论-main
*/
/*未登录提醒*/
.comment-login-box { margin: 20px; }
.comment-login { width: 100%; height: 86px; padding: 22px 30px; background-color: #fff7e7; border: 1px solid #ded6c5; 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;} 
.comment-login p { float: left; font-size:14px; color: #6b3612; line-height: 40px; }  
.comment-login .btn { border-radius: 0; } 
/* 评论输入框 */
.comment-form { margin: 20px; }
.comment-form textarea { width: 100%; height: 115px; padding: 18px; color: #6d6d6d; margin: 0; font-size: 14px;  border: 1px solid #e4e9ed;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;}
.comment-form textarea:focus { border: 1px solid #3da2e3; }
.comment-warn { position: absolute; right: 15px; top: 85px; font-size: 12px; color: #bdc3c7; }
.comment-warn span { color: #f39c12; font-weight: bold; }
.comment-tip { margin-right: 15px; font-size: 14px; color: #bdc3c7; line-height: 40px; }
.comment-form .btn { padding: 0; border-radius: 0; width: 100px; height: 40px; line-height: 40px; }

.comment-form-inner { margin: 20px -70px 0 0; }
/*验证码*/
.comment-code { width: 148px; height: 40px; overflow: hidden; } 
/*.comment-code img { width: 100%; height: 100%; }*/
.comment-code-input { width: 100px; height: 28px; margin-left: 15px; margin-right: 10px; border: 1px solid #ccc;padding: 5px 10px;font-size: 14px; }
.comment-code-input:focus { border-color: #3da2e3;}

/*精彩评论*/
.comment-main .tag { position: absolute; top: 45px; right: -5px; background: url("../images/ribbon.png") no-repeat; width: 61px; height: 28px; font-size: 12px; color: #fff; text-indent: 20px; line-height: 20px; } 
.comment-main + .all { position: relative; margin: 20px 0; border-top: 1px solid #eff3f5; clear: both;}
.comment-main + .all:before { content: "全部评论"; font-family: "Microsoft Yahei"; position: absolute; top: -14px; left: 50%; margin-left: -50px; width: 100px; background-color: #fff; font-size: 16px; color: #9dacb9; text-align: center; }
/*评论列表*/
.comment-main {}
.comment-main > li { position: relative; min-height: 90px; padding: 20px 0; transition: all .2s;}
.comment-main > li:hover { background-color: #f6f9fa; }
.comment-num { position: relative; float: left; width: 43px; height: 73px; margin: 0 20px 0 42px; /*overflow: hidden;*/ }
.comment-num i { float: left; position: relative; font-size: 43px; color: #eff3f5; cursor: pointer; overflow: hidden;
/*color: #fff; */}
    /*  精彩评论 top 点赞up 反对down  */
.comment-num .top .num { top: 17px; }
.comment-num .top { cursor: default; }
.comment-num .up { height: 43px; }
.comment-num .down { height: 24px; margin-top: 6px; }
.comment-num .up:after,
.comment-num .down:after { content:""; position: absolute; border-style: solid; transition: all .2s;}
.comment-num .up:after { top: 10px; left: 15px; border-color: transparent transparent #bdc3c7 transparent; border-width: 0 6px 6px 6px; }
.comment-num .down:after { top: 7px; left: 15px; border-color: #bdc3c7 transparent transparent transparent; border-width: 6px 6px 0 6px;}
.comment-num .num { position: absolute; top: 24px; left: 0; width: 43px; font-size: 12px; color: #bdc3c7; text-align: center; }
  
.comment-num .up:hover:after { border-bottom-color: #FF1D6B;}
.comment-num .down:hover:after { border-top-color: #FF1D6B;}
.comment-num .up:hover .num { color: #FF1D6B; }

.comment-num i.on { color: #FF1D6B; }
.comment-num .up.on:after { border-bottom-color: #fff; }
.comment-num .down.on:after { border-top-color: #fff; }
.comment-num .on:hover .num,
.comment-num .on .num { color: #fff; }

.comment-num-down { position: absolute; top: 75px; left: 0; width: 43px; font-size: 12px; color: #e74c3c; text-align: center; opacity: 0;

}
.comment-num-down.on {
  -webkit-animation: oppose 1s linear;
     -moz-animation: oppose 1s linear;
       -o-animation: oppose 1s linear;
          animation: oppose 1s linear;
}
@-webkit-keyframes oppose
{
0% {opacity: 0; top: 60px;}
70% {opacity: 1; top: 75px;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
100% {opacity: 0; top: 75px;}
}
@-moz-keyframes oppose
{
0% {opacity: 0; top: 60px;}
70% {opacity: 1; top: 75px;}
100% {opacity: 0; top: 75px;}
}
@-o-keyframes oppose
{
0% {opacity: 0; top: 60px;}
70% {opacity: 1; top: 75px;}
100% {opacity: 0; top: 75px;}
}
@keyframes oppose
{
0% {opacity: 0; top: 60px;}
70% {opacity: 1; top: 75px;}
100% {opacity: 0; top: 75px;}
}

.comment-cont { float: left; width: 670px; margin-left: 20px; }
.comment-cont .user { margin-bottom: 2px; }
.comment-cont .user a { font-size: 14px; color: #95a5a6; font-weight: bold;}
.comment-cont .user a:hover { color: #FF1D6B; text-decoration: underline; }
.comment-cont .user time { margin-left: 15px; font-size: 12px; color: #bdbdbd; }
.comment-cont .text { font-size: 16px; color: #34495e; line-height: 26px; }
.comment-cont .retext { border-left: 3px solid #FF1D6B; padding-left: 12px;}
.comment-cont .retext p { font-size: 14px; color: #bdc3c7; }

.comment-cont .oper { margin-top: 15px; height: 30px; line-height: 30px; }
.comment-cont .oper a { float: left; padding: 0 22px; font-size: 12px; color: #34495e; }
.comment-cont .oper a.comment-toggle { border: 1px solid #34495e; border-radius: 20px; line-height: 28px; }
.comment-cont .oper a.comment-toggle i { display: inline-block; margin-right: 10px; color:  #34495e; line-height: 28px; }
.comment-cont .oper a:hover,
.comment-cont .oper a:hover i { color: #FF1D6B; border-color: #FF1D6B;}
.comment-cont .oper-hide { display: none; }
.comment-cont .oper:hover .oper-hide { display: block; }


/*详情页评论*/
/*.works-comment { padding: 20px; }*/


/*右侧滑动*/
#portamento_container { float: right; position: relative; }
#portamento_container #sidebar {float:none; position:absolute;} 
#portamento_container #sidebar.fixed { position:fixed; } 

/*作品详情页侧边栏*/
.works-author-aside .info { width: 150px; margin-left: 10px; }
.works-author-aside .info h1 { height: 22px; line-height: 22px; }
.works-author-aside .info .name { display: inline-block; font-size: 16px; color: #2c3e50; font-weight: bold; line-height: 22px; }
.works-author-aside .info .name:hover{}
.works-author-aside .info .intro { font-size: 14px; color: #bdc3c7; line-height: 20px; }
.works-author-aside .btn-group { }
.works-author-aside .btn-item { float: left; margin-right: 10px; font-size: 12px; color: #34495e; }
.works-author-aside .btn-item i { margin-right: 5px; font-size: 14px; color: #34495e;}
.works-author-aside .btn-item i.icon-add-bold,
.works-author-aside .btn-item i.icon-close-bold { font-size: 12px; }
.works-author-aside .btn-item:hover { color: #FF1D6B; }
.works-author-aside .btn-item:hover i { color: #FF1D6B; }
/*关注.icon-add-bold:before { content: "\e66e"; }
已关注.icon-ok-sign:before { content: "\e627"; }
相互关注.icon-relating-bold:before { content: "\e670"; }
取消关注.icon-close-bold:before { content: "\e66c"; }*/

/*更多作品推荐*/
.works-look-aside  {}
.works-look-aside h3 { margin-top: 20px; font-size: 14px; color: #9dacb9; line-height: 26px; }
.works-look-aside h3 .more { float: right; font-size: 12px; color: #acbbc6; }
.works-look-aside li { float: left; position: relative; }
.works-look-aside li a { display: block; width: 110px; height: 83px; overflow: hidden; }
.works-look-aside .overlay { visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.5); transition: all .2s;}
.works-look-aside li a:hover .overlay { visibility: visible; opacity: 1; }
.works-look-aside .overlay i { font-size: 50px; color: #34495e; line-height: 83px; }
.works-look-aside .overlay span {display: block; text-align: center; font-size: 14px; color: #34495e; line-height: 83px; }

/*快捷点赞评论*/
.works-oper-aside { margin-top: 20px; }
.works-oper-aside .hexagon-btn { position: relative; float: left; overflow: hidden; width: 100px; height: 40px; }
.works-oper-aside .hexagon-btn i { font-size: 100px; line-height: 40px; color: #bdc3c7; transition: color .2s;}
.works-oper-aside .hexagon-btn .text { position: absolute; top: 0; left: 0; width: 100px; height: 40px; line-height: 40px; font-family: "Microsoft Yahei"; font-size: 14px; text-align: center; color: #34495e; transition: color .2s;}
.works-oper-aside .hexagon-btn:hover i { color: #44a0dd;}
.works-oper-aside .hexagon-btn:hover .text { color: #44a0dd;}

.comment-quick { /*position: absolute; top: 65px; left: 0;*/ z-index: 1;display: none; margin-top: 50px;
   /* opacity: 0; visibility: hidden; */
/*    -webkit-transform: scale(0,0);
       -moz-transform: scale(0,0);
        -ms-transform: scale(0,0);
         -o-transform: scale(0,0);
            transform: scale(0,0);
    -webkit-transform-origin: 80% -50px;
       -moz-transform-origin: 80% -50px;
        -ms-transform-origin: 80% -50px;
         -o-transform-origin: 80% -50px;
            transform-origin: 80% -50px;
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
        -ms-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;*/ }
/*.comment-quick.open { opacity: 1; visibility: visible; display: block;
    -webkit-transform: scale(1,1);
       -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
         -o-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-transform-origin: 80% -50px;
       -moz-transform-origin: 80% -50px;
        -ms-transform-origin: 80% -50px;
         -o-transform-origin: 80% -50px;
            transform-origin: 80% -50px;}*/
.comment-quick textarea { width: 198px; height: 80px; padding: 10px; color: #6d6d6d; font-size: 14px;}
.comment-quick .btn { border-radius: 0; margin-top: 5px; padding: 0; width: 80px; height: 30px; line-height: 30px;}

/*私信举报弹出框*/
.modal-letter { position: relative; width: 640px; margin: 0 auto; z-index: 101; height: 215px; padding: 15px 30px 30px; background-color: #fff; }
.modal-letter .icon-close { position: absolute; top: 20px; right: 20px; font-size: 18px; color: #e4e9ed; cursor: pointer; }
.modal-letter .popup-info h2 { margin-bottom: 10px; font-size: 24px; color: #2c3e50; text-indent: -10px; }
.modal-letter .popup-info h2 a { color: #2f99de; }
.modal-letter .popup-info label { margin-right: 28px; font-size: 14px; color: #7f8c8d; }
.modal-letter .popup-info label input { margin-right: 5px; }
.modal-letter .popup-text { width: 628px; height: 93px; padding: 10px 5px; font-size: 12px; color: #bdc3c7; }
.modal-letter .popup-text-let { height: 60px; margin-top: 10px; }
.modal-letter .btn { width: 100px; height: 40px; border-radius: 0; }
.modal-letter .tip { display: inline-block; margin-right: 10px; font-size: 12px; color: #bdc3c7; line-height: 40px; }

/*表情框*/
.uiem-btn { z-index: 2; position: relative; width: 77px; height: 40px; text-align: center; font-size: 12px; color: #3499da; line-height: 40px; cursor: pointer; }
.uiem-btn .icon-face { margin-right: 3px; font-size: 18px; color: #3499da; }
.uiem-box { z-index: 1; display: block; position: absolute; top: 0; left: 0; width: 344px; height: auto; background-color: #fff; border: 1px solid #e6eaee; box-shadow: 0 0 8px rgba(0,0,0,.15); }
.uiem-nav { width: 100%; height: 35px; border-bottom: 1px solid #e6eaee; }
.uiem-cont { margin: 12px;  padding: 1px 0 0 1px; }
.uiem-cont li { float: left; width: 22px; height: 22px; padding: 3px; margin: -1px 0 0 -1px; border: 1px solid #ececec; cursor: pointer; }
.uiem-cont li img { width: 22px; height: 22px; }
.uiem-cont li:hover, 
.uiem-cont li.on { position: relative; z-index:2; list-style: none outside none; border-color: #aec9e8; background-color: #e4eef9; border-radius: 2px;}